<template>
    <div>
        <fieldset> <legend><h3>明细查询</h3></legend>
            <div>
                <div>{{messages}}</div>
                <table>
                    <tr>
                        <td>手机号：</td><td><el-input style="width:200px;" type="text" v-model="search.phone" /></td><td><el-button size="mini" @click="searchPhone()">查询</el-button></td>
                    </tr>
                </table>
                电话号码相关的订单明细：
                <table width="100%" style="border:1px solid #ccc;border-collapse:collapse;">
                    <tr bgcolor="#668aff">
                        <td>电话</td>
                        <td>姓名</td>
                        <td>地址</td>
                        <td>systemcode</td>
                        <td>金额（分）</td>
                        <td>创建日期</td>
                        <td>银行申请编号</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for=" (item,index) in orderflow" v-bind:key="index">
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.phone}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.uname}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.addr}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.systemcode}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.amount}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.cdate}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;"><a @click="getOrderInfo(item.orderCode)">{{item.orderCode}}</a></td>
                        <td v-if="item.status == 1" style="background:green">已付款</td>
                        <td v-if="item.status == 0" style="background:red">未付款</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;width:100px">
                            <button style="width:100%" @click="searchOrderCode(item.orderCode)">关联银行单据</button>
                        </td>
                    </tr>
                </table>
                银行单据关联：
                <table width="100%" style="border:1px solid #ccc;border-collapse:collapse;">
                    <tr bgcolor="#668aff">
                        <td>被支付次数</td>
                        <td>是否被操作退款</td>
                        <td>金额（yuan）</td>
                        <td>商户号</td>
                        <td>银行申请编号</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for=" (item,index) in bankflow" v-bind:key="index">
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.paytimes}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.refundStatus}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.orderAmount}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.wechatNo}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.orderCode}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;width:100px"><button style="width:100%" @click="searchWechatno2(item.wechatNo)">获取商户号</button></td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td>商户号：</td><td><el-input style="width:200px;" type="text" v-model="search.wechatno" /></td><td><el-button size="mini" @click="searchWechatno">查询</el-button></td>
                    </tr>
                </table>
                <table width="100%" style="border:1px solid #ccc;border-collapse:collapse;">
                    <tr bgcolor="#668aff">
                        <td>被支付次数</td>
                        <td>是否被操作退款</td>
                        <td>金额（yuan）</td>
                        <td>商户号</td>
                        <td>银行申请编号</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for=" (item,index) in thridpartybankflow" v-bind:key="index">
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.paytimes}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.refundStatus}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.orderAmount}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;">{{item.wechatNo}}</td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;"><a @click="getOrderInfo(item.orderCode)">{{item.orderCode}}</a> <button @click="getOrderInfo(item.orderCode)">查看信息</button></td>
                        <td style="border:1px solid #ccc;border-collapse:collapse;width:100px"><button if="item.paytimes == '1' " style="width:100%"  @click="refundMoney(item.wechatNo,item.orderCode,item.orderAmount)">退款</button></td>
                    </tr>
                </table>
            </div>
        </fieldset>
        <fieldset> 
		<legend>
		<h3>投诉信息查询</h3></legend>
		密码：<el-input style="width:200px;" type="password" v-model="password" auto-complete="new-password"/>
        商户订单号：<el-input style="width:200px;" v-model="orderNo" />
        商户订单号结尾：<el-input style="width:200px;" v-model="orderNoEnd" />
        姓名：<el-input style="width:200px;" v-model="uname" />
        电话：<el-input style="width:200px;" v-model="phone" />
		处理状态<el-select style="width:200px;" v-model="searchStatus">
			<el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
		</el-select>
		<el-button size="mini" @click="searchData">查询</el-button>
		<div>
			<el-table  border  
					:data="content"
					stripe
					style="width: 100%" id="celltable">
					<el-table-column prop="phone" label="手机号" align="center"> </el-table-column>
					<el-table-column prop="uname" label="姓名" align="center">  </el-table-column>
					<el-table-column prop="addr" label="地址" align="center">  
						<template scope="scope">
							<a @click="alertmessage(scope.row.addr)">{{scope.row.addr}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="orderNo" label="商户单号" align="center" width="230px;">  </el-table-column>
					<el-table-column label="图片" align="center">
						<template scope="scope">
							<a v-bind:href="scope.row.orderImageUrl" target="_blank"><img width='100px' height="100px;" v-bind:src="scope.row.orderImageUrl"/></a>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="用户备注信息" align="center">
						<template scope="scope">
							<a @click="alertmessage(scope.row.remark)">{{scope.row.remark}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100px;" align="left">
                        <template scope="scope">
							<span v-if="scope.row.status == '1'">处理完毕</span>
                            <span v-if="scope.row.status == '-1'">已处理未完毕</span>
                            <span v-if="scope.row.status == '0'">未处理</span>
                            <span v-if="scope.row.status == '-2'">作废</span>
                            <span v-if="scope.row.status == '-3'">补发</span>
                            <span v-if="scope.row.status == '2'">用户已经撤销</span>
                            <span v-if="scope.row.status == '3'">退款</span>
						</template>
					</el-table-column>
					<el-table-column prop="cptag" label="处理备注" align="center"> </el-table-column>
					<el-table-column label="操作" width="230px;" align="left">
						<template scope="scope">
							<el-button size="mini" @click="opendg(scope.row.id)">变更状态</el-button>
                            <el-button size="mini" @click="getDetail(scope.row.phone,scope.row.orderNo)">获取明细</el-button>
						</template>
					</el-table-column>
			</el-table>
			<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNo"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</fieldset>


            <el-dialog
                title="变更状态"
                :visible.sync="dialogVisible"
                width="30%">
                <table>
                   
                    <tr>
                        <td style="width:50px;">状态：</td><td>  		
                            <el-select v-model="status">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select> 
                        </td>
                    </tr>
                     <tr>
                        <td>备注：</td><td>  <el-input style="width:300px" v-model="cptag" /> </td>
                    </tr>

                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateMessage">确 定</el-button>
                </span>
            </el-dialog>

             <el-dialog
                title="变更状态"
                :visible.sync="dialogRefundVisible"
                width="30%">
                <table>
                    <tr>
                        <td>订单号：</td><td>  <input type="text" style="width:300px;"  v-model="refundmsg.orderCode" disabled=true> </td>
                    </tr>
                    <tr>
                        <td>商户订单号：</td><td>  <input type="text" style="width:300px;"  v-model="refundmsg.thirdPartyNo" disabled=true> </td>
                    </tr>
                    <tr>
                        <td>金额：</td><td>  <input type="text" style="width:300px;"  v-model="refundmsg.amount" disabled=true> </td>
                    </tr>
                    <tr>
                        <td>备注：</td><td> <input type="text" style="width:300px;" v-model="refundmsg.remark" > </td>
                    </tr>
                    <tr>
                        <td>密码：</td><td> <input type="text" style="width:300px;" v-model="refundmsg.password" > </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogRefundVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doRefund">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    import  {searchCustomer,updateCustomerInfo,phoneOrderflow,searchPaymentDetailList,searchPaymentDetailBythridpartyno,orderInfo} from '@/api/kz/kzapi.js'
import  {dorefund} from '@/api/kz/kzbank.js'
    export default {
        data(){
            return {
                messages :{},
                search : {
                    phone : "",
                    wechatno : ""
                },
                orderflow : [] ,
                bankflow : [] ,
                thridpartybankflow : [] ,
                refundmsg : {
                    amount : "",
                    orderCode : "",
                    password : "",
                    remark : "",
                    thirdPartyNo : ""
                },
                dialogVisible :false ,
                dialogRefundVisible :false ,
                id : "" ,
                phone : '',
                uname : '',
                orderNo : '',
                orderNoEnd : '',
                password :'',
                cptag :'', 
                searchStatus :'', 
                status:'',
                content : [],
                pageNo: 0,
                pageSize:10,
                total : 0,
                options: [
                            {
                                value: '1',
                                label: '处理完毕'
                            }, 
                            {
                                value: '-1',
                                label: '已处理,未完毕'
                            }, 
                            {
                                value: '0',
                                label: '未处理'
                            }, 
                            {
                                value: '-2',
                                label: '作废'
                            }, 
                            {
                                value: '-3',
                                label: '补发'
                            }, 
                            {
                                value: '3',
                                label: '退款'
                            }
                        ]
            }
        },
        methods : {
            searchData : function(){
				this.fetchData(0,10);
			},
			handleSizeChange: function (size) {
		        this.pageSize = size;
		        this.fetchData(this.pageNo , size );
		    },
		    handleCurrentChange: function(pageNo){
                // console.log(pageNo)
		        this.pageNo = pageNo;
		        this.fetchData(pageNo,this.pageSize);
		    },
		    fetchData: function(pageNo,pageSize){
		    	var _this = this ;
		    	var data= {
		    		pageNo : pageNo ,
		    		pageSize : pageSize ,
					uname : _this.uname ,
					phone : _this.phone ,
                    orderNo  : _this.orderNo,
                    orderNoEnd :  _this.orderNoEnd,
					password : _this.password,
					status  : _this.searchStatus
		    	};
		    	searchCustomer(data).then((response)=>{
                   	this.$set(this,"content",response.data.content);
					this.$set(this,"total",response.data.total);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            opendg : function(id){
				this.$set(this,"dialogVisible",true);
				this.$set(this,"status","");
                this.$set(this,"cptag","");
                this.$set(this,"id",id);
			},
			updateMessage: function(){
				var _this = this ;
				var data = {
					id : _this.id ,
					password : _this.password,
					status : _this.status ,
					cptag : _this.cptag 
                }
                updateCustomerInfo(data).then((response)=>{
                    if(response.data.succeed == true){
                        this.fetchData(0,10);
                        this.$set(this,"dialogVisible",false);
                    }else{
                        this.$message('提示:'+response.data.msg);
                    }	
                }).catch((error)=>{
                    console.log(error);
                })
			},
			getDetail: function(phone,wechatno){
                this.search.phone = phone ;
                this.search.wechatno = wechatno ;
                this.bankflow = [] ;
                // 
                this.searchPhone();
                this.searchWechatno();
            },
            searchPhone: function(){
				var data = {phone : this.search.phone};
                phoneOrderflow(data).then((response)=>{
                    this.orderflow =  response.data ;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            searchWechatno: function(){
                var data = {thridpartyno : this.search.wechatno};
                searchPaymentDetailBythridpartyno(data).then((response)=>{
                    this.thridpartybankflow =  response.data ;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            searchWechatno2: function(thridpartyno){
                this.search.wechatno = thridpartyno;
                this.searchWechatno();
            },
            searchOrderCode: function(ordercode){ // 通过订单号 查询  商户号并查询订单
                var data = {ordercode : ordercode};
                searchPaymentDetailList(data).then((response)=>{
                    console.log(response.data);
                    this.bankflow =  response.data ;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            refundMoney : function(wechatNo,orderCode,orderAmount){
                this.$set(this,"dialogRefundVisible",true);
				this.$set(this.refundmsg,"thirdPartyNo",wechatNo);
                this.$set(this.refundmsg,"orderCode",orderCode);
                this.$set(this.refundmsg,"amount",""+orderAmount);
                this.$set(this.refundmsg,"remark","");
            },
            doRefund : function(){
                dorefund(this.refundmsg).then((response)=>{
                    this.$message('提示:'+response.data.msg);
                    this.$set(this,"dialogRefundVisible",false);
                }).catch((error)=>{
                    console.log(error);
                });
            },
            getOrderInfo(orderCode){
                orderInfo(orderCode).then((response)=>{
                    this.messages = response.data;
                }).catch((error)=>{
                    console.log(error);
                });
            }
        }
    }
</script>